<!doctype html>
<html lang="en">
<head>
    <title>ComboBox</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijcombobox.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijcombobox.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            // put all your jQuery goodness in here.
            var testArray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
            var myReader = new wijarrayreader([{
                name: 'label'
            }, {
                name: 'value'
            }, {
                name: 'selected',
                defaultValue: false
            }]);
            var datasourceOptions = {
                reader: myReader,
                data: testArray
            };
            var datasource = new wijdatasource({
                reader: myReader,
                data: testArray
            });
            $("#tags").wijcombobox({
            	
                data: datasource,
                width: 150
            });
        });

        function changeProperties() {
            var showingSpeed, hidingSpeed, expandingSpeed, collapsingSpeed;
            showingSpeed = parseNumberFromString($('#showingSpeed').val());
            hidingSpeed = parseNumberFromString($('#hidingSpeed').val());
            var showingAnimation = {
                animated: $('#showingEffectTypes').get(0).value,
                options: null,
                duration: showingSpeed
            };
            var hidingAnimation = {
            	animated: $('#hidingEffectTypes').get(0).value,
                options: null,
                duration: hidingSpeed
            };
            var wij = $('#tags');
            wij.wijcombobox('option', 'showingAnimation', showingAnimation);
            wij.wijcombobox('option', 'hidingAnimation', hidingAnimation);
        }

        function parseNumberFromString(st) {
            var i = 1000;
            try {
                i = parseInt(st);
            }
            catch (e) {
                alert(e);
            }
            return i;
        }
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Animation</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div>
                <input id="tags" />
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <div class="option-row">
                    <label for="showingSpeed">
                        Showing Speed
                    </label>
                    <input id="showingSpeed" type="text" value="1000" onblur="changeProperties()" />
                </div>
                <div class="option-row">
                    <label for="showingEffectTypes">
                        Showing Effect
                    </label>
                    <select id="showingEffectTypes" name="effects" onchange="changeProperties()">
                        <option value="none">none</option>
                        <option value="blind">Blind</option>
                        <option value="bounce">Bounce</option>
                        <option value="clip">Clip</option>
                        <option value="drop">Drop</option>
                        <option value="explode">Explode</option>
                        <option value="fade">Fade</option>
                        <option value="fold">Fold</option>
                        <option value="highlight">Highlight</option>
                        <option value="puff">Puff</option>
                        <option value="pulsate">Pulsate</option>
                        <option value="scale">Scale</option>
                        <option value="shake">Shake</option>
                        <option value="size">Size</option>
                        <option value="slide">Slide</option>
                    </select>
                </div>
                <div class="option-row">
                    <label for="hidingSpeed">
                        Hiding Speed
                    </label>
                    <input id="hidingSpeed" type="text" value="1000" onblur="changeProperties()" />
                </div>
                <div class="option-row">
                    <label for="hidingEffectTypes">
                        Hiding Effect
                    </label>
                    <select id="hidingEffectTypes" name="effects" onchange="changeProperties()">
                        <option value="none">none</option>
                        <option value="blind">Blind</option>
                        <option value="bounce">Bounce</option>
                        <option value="clip">Clip</option>
                        <option value="drop">Drop</option>
                        <option value="explode">Explode</option>
                        <option value="fade">Fade</option>
                        <option value="fold">Fold</option>
                        <option value="highlight">Highlight</option>
                        <option value="puff">Puff</option>
                        <option value="pulsate">Pulsate</option>
                        <option value="scale">Scale</option>
                        <option value="shake">Shake</option>
                        <option value="size">Size</option>
                        <option value="slide">Slide</option>
                    </select>
                </div>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
This sample demonstrates the different animation effects and how you can manipulate their speed.
            </p>
        </div>
    </div>
</body>
</html>
